import React from 'react'
import {WhiteSpace, WingBlank} from "antd-mobile";
import {GameDataArrayToObject, GameDataObjectFinalized, ICON_URL_PREFIX} from "../../../../../../../redux/game";
import {getYearMonthDayArr} from "../../../../../../../utils/dateService";
import {formatAsiaOdd, formatTableAsiaOdd} from "../../../index/AsiaOddsTable/AsiaOddsTable";
import TeamIconTitle from "../../../../../../../shared-components/PlayerList/TeamIconTitle/TeamIconTitle";


// const textCls = (n1, n2) => {
//     if (n1 > n2) return 'winner-text'
//     if (n1 < n2) return 'loser-text'
//     return ''
// }

// const textCls = (id, curId, score, otherScore) => {
//     if (id === curId && score > otherScore) return 'winner-text'
//     // if (n1 < n2) return 'loser-text'
//     return ''
// }
export const winColor = '#FA7268'
export const tiedColor = '#FFA500'
export const loseColor = '#36C8B9'
const RecordTable = props => {

    const {
        type,
        recordList,
        teams,
        events,
        sameHomeAway,
        currentGame,
        icon,
        team,
        sameEvent,
    } = props



    let recordListSorted = recordList && recordList
        .map(vsData => {
            let objInit = GameDataArrayToObject(vsData)
            let objFinal = GameDataObjectFinalized(objInit, teams, events)
            return objFinal
        })


    if (sameHomeAway) {
        recordListSorted = recordListSorted.filter(record => {
            const {
                homeTeam,
                awayTeam,
            } = record
            const homeTeamDetail = homeTeam.detail
            const awayTeamDetail = awayTeam.detail
            const homeTeamId = homeTeamDetail.id
            const awayTeamId = awayTeamDetail.id
            const curHomeTeamId = currentGame.home_team.id
            const curAwayTeamId = currentGame.away_team.id

            if (type === 'home') {
                return homeTeamId === curHomeTeamId
            } else if (type === 'away') {
                return awayTeamId === curAwayTeamId
            } else {
                return homeTeamId === curHomeTeamId
            }
        })
    }

    if (sameEvent) {
        recordListSorted = recordListSorted.filter(record => {
            const {
                eventId
            } = record
            const curEventId = currentGame.matchevent.id
            return curEventId === eventId
        })
    }

    if (recordListSorted && recordListSorted.length >= 10) {
        recordListSorted = recordListSorted.slice(0, 10)
    }


    let summaryData =  {}

    recordListSorted && recordListSorted.map(record => {
        const {
            homeTeam,
            awayTeam,
        } = record
        const homeTeamId = homeTeam.teamId
        const awayTeamId = awayTeam.teamId
        if (!summaryData[homeTeamId]) {
            summaryData[homeTeamId] = {
                win: 0,
                tied: 0,
                lose: 0,
                score: 0,
                miss: 0,
            }
        }
        if (!summaryData[awayTeamId]) {
            summaryData[awayTeamId] = {
                win: 0,
                tied: 0,
                lose: 0,
                score: 0,
                miss: 0,
            }
        }
        const homeScore = homeTeam.teamScore
        const awayScore = awayTeam.teamScore
        summaryData[homeTeamId].score += homeScore
        summaryData[homeTeamId].miss += awayScore
        summaryData[awayTeamId].score += awayScore
        summaryData[awayTeamId].miss += homeScore
        if (homeScore === awayScore) {
            summaryData[homeTeamId].tied += 1
            summaryData[awayTeamId].tied += 1
        }
        if (homeScore > awayScore) {
            summaryData[homeTeamId].win += 1
            summaryData[awayTeamId].lose += 1
        }
        if (homeScore < awayScore) {
            summaryData[homeTeamId].lose += 1
            summaryData[awayTeamId].win += 1
        }
        // eslint-disable-next-line array-callback-return
        return
    })


    const tBody = recordListSorted && recordListSorted.map((game, index) => {

        const {
            // matchId,
            // eventId,
            // status,
            schedule,
            // startAt,
            homeTeam,
            awayTeam,
            gameInfo,
            // seasonInfo,
            // stageInfo,
            event,
            // stage,
        } = game
        const dateArr = getYearMonthDayArr(new Date(schedule * 1000))
        const year = dateArr[0]
        const date = dateArr.slice(1).join('/')
        const competitionName = event.name_zh

        const homeTeamDetail = homeTeam.detail
        const awayTeamDetail = awayTeam.detail
        const homeTeamId = homeTeam.teamId
        // const awayTeamId = awayTeam.teamId
        // console.log(currentGame)
        const curHomeTeamId = currentGame.home_team.id
        const curAwayTeamId = currentGame.away_team.id
        const homeTeamName = homeTeamDetail.name_zh
        const homeScore = homeTeam.teamScore
        const homeHalfScore = homeTeam.teamScoreHalf
        const awayTeamName = awayTeamDetail.name_zh
        const awayScore = awayTeam.teamScore
        const awayHalfScore = awayTeam.teamScoreHalf

        // console.log(type)
        const textColored = (type, homeTeam, awayTeam, currentGame, homeOrAway, teamOrScore,) => {

            const homeTeamId = homeTeam.teamId
            const awayTeamId = awayTeam.teamId
            const curHomeTeamId = currentGame.home_team.id
            const curAwayTeamId = currentGame.away_team.id
            const homeScore = homeTeam.teamScore
            const awayScore = awayTeam.teamScore

            if (homeOrAway === 0 && homeScore !== awayScore) {
                if (type === 'home' || type === 'history') {
                    if (homeTeamId === curHomeTeamId) {
                        if (homeScore > awayScore) {
                            return 'winner-text'
                        }
                    }
                } else if (type === 'away') {
                    if (homeTeamId === curAwayTeamId) {
                        if (homeScore > awayScore) {
                            return 'winner-text'
                        }
                    }
                }
            } else if (homeOrAway === 1 && homeScore !== awayScore) {
                if (type === 'away') {
                    if (awayTeamId === curAwayTeamId) {
                        if (awayScore > homeScore) {
                            return 'winner-text'
                        }

                    }
                } else if (type === 'home' || type === 'history') {
                    if (awayTeamId === curHomeTeamId) {
                        if (awayScore > homeScore) {
                            return 'winner-text'
                        }
                    }
                }
            } else {
                if (teamOrScore === 1) {
                    return 'tied-text'
                }

            }

            // if (type === 'home') {
            //     return textCls(homeTeamId, curHomeTeamId, homeScore, awayScore)
            // } else if (type === 'away') {
            //     return textCls(awayTeamId, curAwayTeamId, awayScore, homeScore)
            // } else {
            //     return ''
            // }
        }

        const asia = Number(gameInfo[0].split(',')[1])
        let PanLu
        let PanLuResult
        let PanLuStyle = {}
        let lC = '#009904'
        let wC = '#FA7268'
        let zC = '#FFA500'
        let scoreDiff = homeScore - asia - awayScore
        if (asia.toString() === 'NaN') {
            PanLuResult = ''
        } else {
            let rate = asia / 0.25
            if (rate % 2 === 0) {
                PanLu = asia
                if (scoreDiff > 0) {
                    if (type === 'home' || type === 'history') {
                        if (curHomeTeamId === homeTeamId) {
                            PanLuResult = '赢'
                            PanLuStyle.color = wC
                        } else {
                            PanLuResult = '输'
                            PanLuStyle.color = lC
                        }
                    } else if (type === 'away') {
                        if (curAwayTeamId === homeTeamId) {
                            PanLuResult = '赢'
                            PanLuStyle.color = wC
                        } else {
                            PanLuResult = '输'
                            PanLuStyle.color = lC
                        }
                    }
                } else {
                    if (type === 'home' || type === 'history') {
                        if (curHomeTeamId === homeTeamId) {
                            PanLuResult = '输'
                            PanLuStyle.color = lC
                        } else {
                            PanLuResult = '赢'
                            PanLuStyle.color = wC
                        }
                    } else if (type === 'away') {
                        if (curAwayTeamId === homeTeamId) {
                            PanLuResult = '输'
                            PanLuStyle.color = lC
                        } else {
                            PanLuResult = '赢'
                            PanLuStyle.color = wC
                        }
                    }
                    // PanLuResult = '输'
                }
            } else {

                PanLu = formatTableAsiaOdd(asia)
                if (scoreDiff > 0) {
                    if (type === 'home' || type === 'history') {
                        if (curHomeTeamId === homeTeamId) {
                            PanLuResult = '赢'
                            PanLuStyle.color = wC
                        } else {
                            PanLuResult = '输'
                            PanLuStyle.color = lC
                        }
                    } else if (type === 'away') {
                        if (curAwayTeamId === homeTeamId) {
                            PanLuResult = '赢'
                            PanLuStyle.color = wC
                        } else {
                            PanLuResult = '输'
                            PanLuStyle.color = lC
                        }
                    }
                } else {
                    if (type === 'home' || type === 'history') {
                        if (curHomeTeamId === homeTeamId) {
                            PanLuResult = '输'
                            PanLuStyle.color = lC
                        } else {
                            PanLuResult = '赢'
                            PanLuStyle.color = wC
                        }
                    } else if (type === 'away') {
                        if (curAwayTeamId === homeTeamId) {
                            PanLuResult = '输'
                            PanLuStyle.color = lC
                        } else {
                            PanLuResult = '赢'
                            PanLuStyle.color = wC
                        }
                    }
                }
            }

            if (scoreDiff === 0) {
                PanLuResult = '走'
                PanLuStyle = {
                    color: zC,
                }
            }
        }


        return (
            <div className='flex-space-between-align-center game-results-table-header-row' key={index}>
                <div className='game-results-table-date-col'>
                    <span className='gray-text'>{year}</span>
                    <span className='gray-text'>{date}</span>
                </div>
                <div className='game-results-table-event-col'>
                    <span>{competitionName}</span>
                </div>
                <div className='game-results-table-home-col'>
                    <span className={textColored(type, homeTeam, awayTeam, currentGame, 0, 0)}>{homeTeamName}</span>
                </div>
                <div className='game-results-table-score-col'>
                    <div className='game-results-table-score-col-upper'>
                        <span className={textColored(type, homeTeam, awayTeam, currentGame, 0, 1)}>{homeScore}</span>
                        <span className={homeScore === awayScore ? 'tied-text' : ''}>-</span>
                        <span className={textColored(type, homeTeam, awayTeam, currentGame, 1, 1)}>{awayScore}</span>
                    </div>
                    <span className='gray-text'>({homeHalfScore}-{awayHalfScore})</span>
                </div>
                <div className='game-results-table-away-col'>
                    <span className={textColored(type, homeTeam, awayTeam, currentGame, 1, 0)}>{awayTeamName}</span>
                </div>
                <div className='game-results-table-odd-col'>
                    <p style={PanLuStyle}>{PanLu !== 'NaN/NaN' ? PanLu : ''}</p>
                    <span style={PanLuStyle}>{PanLuResult}</span>
                </div>
            </div>
        )
    })

    let summaryLength = recordListSorted && recordListSorted.length
    let name
    if (team) {
        name = team && team.name_zh
    } else {
        name = currentGame.home_team.name_zh
    }

    let summaryId
    if (type === 'home' || type === 'away') {
        summaryId = team.id
    } else {
        summaryId = currentGame.home_team.id
    }
    let teamSummary = summaryData && summaryData[summaryId]

    let recordSummary = teamSummary
        && <div>
            <span style={{marginLeft: '4px', color: winColor,}}>{teamSummary.win}胜</span>
            <span style={{marginLeft: '4px', color: tiedColor,}}>{teamSummary.tied}平</span>
            <span style={{marginLeft: '4px', color: loseColor,}}>{teamSummary.lose}负</span>
        </div>
    let scoreMissSummary = teamSummary && `进${teamSummary.score}球 失${teamSummary.miss}球`
    let winRate = teamSummary && teamSummary.win / (teamSummary.win + teamSummary.tied + teamSummary.lose)
    let tiedRate = teamSummary && teamSummary.tied / (teamSummary.win + teamSummary.tied + teamSummary.lose)
    let loseRate = 1 - winRate - tiedRate
    const winRateText = `胜率: ${Math.round(winRate * 100)}%`

    const summary = (
        <div style={{paddingTop: '6px',}}>
            <span className='gray-text'>近 {summaryLength} 场战绩, {name} {recordSummary} {scoreMissSummary} {winRateText}</span>
        </div>
    )

    const iconTemplate = team && (
        <div className='flex-center-align-center'>
            <img
                src={`${ICON_URL_PREFIX}/${team.logo}`}
                alt=''
                style={{width: '20px', marginRight: '6px',}}
            />
            <p>{team.name_zh}</p>
        </div>
    )

    const  tableHeader = (
        <div className='flex-space-between-align-center game-results-table-header'>
            <div className='game-results-table-date-col'>
                <span>日期</span>
            </div>
            <div className='game-results-table-event-col'>
                <span>赛事</span>
            </div>
            <div className='game-results-table-home-col'>
                <span>主队</span>
            </div>
            <div className='game-results-table-score-col'>
                <span>比分</span>
            </div>
            <div className='game-results-table-away-col'>
                <span>客队</span>

            </div>
            <div className='game-results-table-odd-col'>
                <span>盘路</span>
            </div>
        </div>
    )

    const notDataBody = <div
        style={{width: '100%', background: '#fff', textAlign: 'center', padding: '16px'}}
    ><p>暂无数据</p></div>

    const summaryHead = <div className="flex-space-between-align-center">
        <span className='gray-text'>近 {summaryLength} 场战绩</span>
        <span className='gray-text'>胜率</span>
    </div>

    const summaryBody = <div className='flex-space-between-align-center'>
        <div className='flex-align-center'>
            <TeamIconTitle team={team}/>
            <div>{recordSummary}</div>
        </div>
        <div style={{color: '#FA7268',}}>{winRateText}</div>
    </div>

    const summaryTemplate = <>
        {summaryHead}
        <WhiteSpace />
        {summaryBody}
        <WhiteSpace />
        <div className='flex' style={{width: '100%', height: '12px',}}>
            <div style={{width: `${winRate * 100}%`, backgroundColor: winColor, height: '12px',}}/>
            <div style={{width: `${tiedRate * 100}%`, backgroundColor: tiedColor, height: '12px',}}/>
            <div style={{width: `${loseRate * 100}%`, backgroundColor: loseColor, height: '12px',}}/>
        </div>
    </>

    return <div className='game-results-table'>
        <WingBlank>
            {summaryLength > 0
                ? summaryTemplate
                : null
            }
            {/*{icon ? iconTemplate : null}*/}
            {recordListSorted && recordListSorted.length > 0 ? tableHeader : null}
            {recordListSorted && recordListSorted.length > 0
                ? tBody
                : notDataBody
            }
            {/*{summaryLength > 0 ? summary : null}*/}
        </WingBlank>
    </div>

}


export default RecordTable
